<template>
  <div style="padding: 24px">
    <a-card
      v-for="(question, index) in questions"
      :key="index"
      :title="`简答题 ${index + 1}`"
      style="margin-bottom: 24px"
    >
      <div class="question-title">{{ question.contentChoice.title }}</div>

      <a-textarea
        v-model:value="question.userAnswer"
        rows="4"
        placeholder="请输入你的答案"
        style="margin: 16px 0"
        :disabled="question.checked"
      />

      <a-button
        type="primary"
        :disabled="!question.userAnswer || question.checked"
        @click="() => handleSubmit(question)"
      >
        提交答案
      </a-button>

      <div v-if="question.checked" style="margin-top: 16px">
        <a-collapse>
          <a-collapse-panel key="1" header="参考答案">
            <pre style="white-space: pre-wrap;">{{ question.answer }}</pre>
          </a-collapse-panel>
          <a-collapse-panel key="2" header="答案解析">
            <pre style="white-space: pre-wrap;">{{ question.analysis }}</pre>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits, defineExpose } from 'vue'
import { useRoute } from 'vue-router'
import { listQuestions } from "@/api/bizQuesstionController"

const emit = defineEmits(['answer-change'])
const route = useRoute()
const videoID = route.params.videoId
const questions = ref([])

onMounted(async () => {
  try {
    const res = await question({  questionType: 5,
      questionTag: videoID,
      page: 1,
      size: 10 })
    const list = res.data?.data?.records || []

    // 过滤简答题，questionType=5
    questions.value = list
      .filter(q => Number(q.questionType) === 5 && q.content)
      .map(q => ({
        ...q,
        contentChoice: JSON.parse(q.content),
        userAnswer: '',
        checked: false,
      }))
  } catch (error) {
    console.error('加载简答题失败：', error)
  }
})

function handleSubmit(question) {
  if (question.userAnswer.trim()) {
    question.checked = true
  }
}
</script>

<style scoped>
.question-title {
  font-size: 16px;
  font-weight: 500;
}
</style>
